import { Obj } from '@/utils/interface'
import { PieData, LineData, ConvertData, Data, ChinaDatas } from './interface'
import { chinaDatas } from '../assets/map/chinaData'
import chinaAreaMap from '@/assets/map/chinaArea.json'
import { GeoInfoResponse } from '@/api'

function deepCopy(obj: Obj) {
  let newObj
  // 如果不是数组对象，并且对象存在，直接返回就可以
  if (obj && typeof obj !== 'object') {
    newObj = obj
    return newObj
  }
  var targetObj: Obj = obj.constructor === Array ? [] : {}
  for (var keys in obj) {
    if (obj.hasOwnProperty(keys)) {
      if (obj[keys] && typeof obj[keys] === 'object') {
        targetObj[keys] = obj[keys].constructor === Array ? [] : {}
        targetObj[keys] = deepCopy(obj[keys])
      } else {
        targetObj[keys] = obj[keys]
      }
    }
  }
  return targetObj
  // return JSON.parse(JSON.stringify(obj));
}

/**半环形图表数据 */
const annulusOption = {
  title: [
    {
      text: '',
      subtext: '',
      x: '40%',
      y: '30%',
      textStyle: {
        fontSize: 24,
        color: '#fff'
      },
      subtextStyle: {
        fontSize: 14,
        color: '#eaecef'
      }
    },
    {
      text: '%',
      subtext: '',
      y: '31.5%',
      x: '54%',
      textStyle: {
        fontSize: 16,
        color: '#ccc'
      },
      subtextStyle: {
        fontSize: 14,
        color: '#eaecef'
      }
    }
  ],
  color: [],
  series: [
    {
      type: 'pie',
      radius: ['82%', '95%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      startAngle: 0,
      data: [{ value: 50 }, { value: 0 }, { value: 0 }]
    }
  ]
}

/**玫瑰图数据 */
const roseOption = {
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [0, 70],
      center: ['50%', '50%'],
      itemStyle: {
        borderRadius: 0
      },
      label: {
        show: false,
        position: 'inside'
      },
      data: [] as PieData[]
    }
  ]
}

/**环形图表数据配置 */
const ringOption = {
  title: {
    text: '45%',
    x: 'center',
    y: 'center',
    textStyle: {
      fontSize: 28,
      color: '#fff'
    },
    subtextStyle: {
      fontSize: 14,
      color: '#eaecef'
    }
  },
  color: ['#4AB6FB', '#8AEEEE'],
  series: [
    {
      type: 'pie',
      startAngle: 90,
      radius: ['70%', '95%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [] as PieData[]
      // //环形心总数
    }
  ]
}

/**折线图数据--医院病床使用率前五 */
const lineOption = {
  // tooltip: {
  //   trigger: 'axis'
  // },
  legend: {
    data: [] as string[],
    textStyle: {
      color: '#fff',
      fontSize: 12
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    axisTick: { show: false },
    boundaryGap: false,
    data: [] as string[],
    axisLabel: {
      //x轴文本颜色
      color: '#d3d3d3'
    }
  },
  yAxis: {
    type: 'value',
    axisTick: { show: false },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#757575',
        type: 'dashed'
      }
    },
    axisLine: {
      show: true,
      lineStyle: {
        type: 'solid',
        color: '#cccccc',
        width: '1'
      }
    }
  },
  series: [
    {
      name: '',
      type: 'line',
      symbol: 'rectangle',
      showSymbol: false,
      symbolSize: 1,
      itemStyle: {
        color: '#73A0FA'
      },
      areaStyle: {
        color: '#73A0FA',
        opacity: '0.4'
      },
      data: [] as number[]
    },
    {
      name: '',
      type: 'line',
      symbol: 'rectangle',
      showSymbol: false,
      symbolSize: 1,
      data: [] as number[],
      itemStyle: {
        color: '#8543E0'
      },
      areaStyle: {
        color: '#8543E0',
        opacity: '0.4'
      }
    },
    {
      name: '',
      type: 'line',
      symbol: 'rectangle',
      showSymbol: false,
      symbolSize: 1,
      data: [] as number[],
      itemStyle: {
        color: '#F7C739'
      },
      areaStyle: {
        color: '#F7C739',
        opacity: '0.4'
      }
    },
    {
      name: '',
      type: 'line',
      symbol: 'rectangle',
      showSymbol: false,
      symbolSize: 1,
      data: [] as number[],
      itemStyle: {
        color: '#E89F9F'
      },
      areaStyle: {
        color: '#E89F9F',
        opacity: '0.4'
      }
    },
    {
      name: '',
      type: 'line',
      symbolSize: 1,
      symbol: 'rectangle',
      itemStyle: {
        color: '#3AB7B7'
      },
      showSymbol: false,
      data: [] as number[],
      areaStyle: {
        color: '#3AB7B7',
        opacity: '0.4'
      }
    }
  ]
}

const barXOption = {
  grid: {
    top: 23,
    left: 60,
    right: 20
    // bottom: 40
  },
  xAxis: {
    type: 'category',
    axisTick: { show: false },
    data: [] as string[],
    axisLabel: {
      color: '#EAECEF'
    }
  },
  yAxis: {
    type: 'value',
    axisTick: { show: false },
    axisLine: {
      show: true,
      lineStyle: {
        type: 'solid',
        color: '#8C93A0',
        width: '1'
      }
    },
    axisLabel: {
      color: '#EAECEF'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#757575',
        type: 'dashed'
      }
    }
  },
  series: [
    {
      data: [] as number[],
      type: 'bar',
      // showBackground:  true,
      barWidth: 12,
      itemStyle: {
        color: '#4AB6FB'
      }
    }
  ]
}

const barYOption = {
  yAxis: {
    inverse: true,
    type: 'category',
    axisTick: { show: false },
    data: [] as string[],
    axisLabel: {
      color: '#EAECEF'
    }
  },
  grid: {
    left: 100,
    top: 23,
    right: 30
  },
  xAxis: {
    type: 'value',

    axisTick: { show: false },
    axisLine: {
      show: true,
      lineStyle: {
        type: 'solid',
        color: '#8C93A0',
        width: '1'
      }
    },
    axisLabel: {
      color: '#EAECEF'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#ababab',
        type: 'dashed'
      }
    }
  },
  series: [
    {
      realtimeSort: true,
      data: [] as number[],
      type: 'bar',
      barWidth: 12,
      itemStyle: {
        color: '#4AB6FB'
      }
    }
  ]
}

/**
 * 获取环形图的data，这个图只用于半开环形图， 并且只能有两个数据输入
 * @param {Number[2]} data 两个数据，环形从做到右的数据
 * @param {string[2]} colors  两个数据的颜色
 * @param {*} text 中心的主标题
 * @param {*} subtext  中心的副标题
 * @param {Number} textFontSize
 * @param {Number} subTextFontSize
 */
function getAnnulusOption(
  data: Array<number>,
  colors: string[],
  text: string,
  subtext: string,
  textFontSize: number,
  subTextFontSize: number
): Obj {
  let resultOption = deepCopy(annulusOption)
  let optionColor = ['rgba(0,0,0,0)']
  optionColor = optionColor.concat(colors)
  resultOption.color = optionColor
  resultOption.title[0].text = text
  resultOption.title[0].subtext = subtext
  resultOption.title[0].textStyle.fontSize = textFontSize
  resultOption.title[0].subtextStyle.fontSize = subTextFontSize
  let firstData = data[0] || 0
  let secondData = data[1] || 0
  // resultOption.series[0].data[0].value = firstData + secondData
  resultOption.series[0].data[1].value = (50 * firstData) / (firstData + secondData)
  resultOption.series[0].data[2].value = (50 * secondData) / (firstData + secondData)
  return resultOption
}

/**
 * 获取玫瑰图标配置项
 * @param data 玫瑰图数据
 * @returns 玫瑰图表配置项
 */
function getRoseOption(data: PieData[]) {
  roseOption.series[0].data = data
  return roseOption
}

/**
 * 获取环形图表配置项
 * @param data 环形图标数据
 * @returns 环形图表配置项
 */
function getRingOption(data: PieData[], title: string = '') {
  ringOption.series[0].data = data
  ringOption.title.text = title
  return ringOption
}

/**
 * 获取柱状图配置
 * @param data 数据
 * @param axisData 坐标轴数据
 * @param isXAxis 是否是X轴
 * @returns 柱状图数据
 */
function getBarOption(data: number[], axisData: string[], isXAxis = true) {
  if (isXAxis) {
    barXOption.xAxis.data = axisData
  } else {
    barYOption.yAxis.data = axisData
  }
  let option = isXAxis ? barXOption : barYOption
  option.series[0].data = data

  return option
}

/**
 * 获取折线图数据
 * @param data 数据
 * @param axisData 坐标轴数据
 * @returns
 */
function getLineOption(data: LineData[], axisData: string[]) {
  let option = lineOption
  option.xAxis.data = axisData
  data.length &&
    data.forEach((item, index) => {
      option.legend.data[index] = item.name
      option.series[index].name = item.name
      option.series[index].data = item.value
    })

  return option
}

/**地图数据处理 */
const convertData = (data: ConvertData[][], allDatas: Data) => {
  const res = []
  for (let i = 0; i < data.length; i++) {
    const dataItem = data[i]
    const fromCoord = allDatas[dataItem[0].name]
    const toCoord = [121.4648, 31.2891] // 上海坐标
    if (fromCoord && toCoord) {
      res.push({
        coords: [
          toCoord, // 起点
          fromCoord // 终点
        ]
      })
    }
  }
  return res
}

const getSeries = (name: string, areaInfo: GeoInfoResponse[][], chinaArea: Data = chinaAreaMap) => {
  const series: any[] = []
  ;[[name, areaInfo]].forEach((item: any, i) => {
    series.push(
      {
        type: 'lines',
        coordinateSystem: 'geo',
        zlevel: 2,
        large: true,
        effect: {
          show: true,
          constantSpeed: 30,
          symbol: 'arrow',
          symbolSize: 6,
          trailLength: 0.02
        },
        lineStyle: {
          color: '#fff',
          width: 2,
          opacity: 0.4,
          curveness: 0.2
        },
        data: convertData(item[1], chinaArea)
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'fill', //波纹绘制方式 stroke, fill
          scale: 2.5 //波纹圆环最大限制，值越大波纹越大
        },
        symbolSize: 10,
        showEffectOn: 'render',
        label: {
          show: false,
          position: 'right',
          color: '#fff',
          formatter: '{b}'
        },
        emphasis: {
          label: {
            show: true
          }
        },
        itemStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: '#40ADFC' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: '#40ADFC' // 100% 处的颜色
              },
              {
                offset: 0.9,
                color: '#ccc' // 100% 处的颜色
              },
              {
                offset: 1,
                color: '#ccc' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        data: item[1].map(function (dataItem: any) {
          return {
            name: dataItem[0].name,
            value: chinaArea[dataItem[0].name]
          }
        })
      },
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          show: true,
          position: 'right',
          color: '#f00',
          formatter: '{b}'
        },
        itemStyle: {
          // color: '#FF3131',//散点颜色
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: '#FF4D4B' // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: '#FF4D4B' // 100% 处的颜色
              },
              {
                offset: 0.85,
                color: '#DCF1FF' // 100% 处的颜色
              },
              {
                offset: 0.9,
                color: '#FF4D4B' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        // symbol: 'pin',
        symbolSize: 20,
        data: [
          {
            name: item[0],
            value: chinaArea[item[0]].concat([10])
          }
        ]
      }
    )
  })
  return series
}

function getMapOption(name: string, areaInfo: GeoInfoResponse[][]) {
  let series = getSeries(name, areaInfo)
  const option = {
    color: ['#34c6bb'],
    geo: {
      silent: true,
      map: '中国',
      zoom: 1.7,
      label: {
        show: false,
        color: '#fff'
      },
      top: '32%',
      tooltip: {
        show: false
      },
      roam: false,
      itemStyle: {
        areaColor: '#143C6B',
        borderColor: '#40ADFC',
        borderWidth: 1.5
      }
    },
    series
  }
  return option
}

export { getAnnulusOption, getRoseOption, getRingOption, getBarOption, getLineOption, getMapOption }
